<template>
    <div>
        <!-- 侧边栏 -->
        <el-aside class="aside" width="200px">
            <el-menu class="menu" active-text-color="#ffd04b" unique-opened router background-color="#545c64"
                :default-active="router.path" text-color="#fff">
                <!-- 首页 -->
                <el-menu-item index="/home">
                    <el-icon>
                        <House />
                    </el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-sub-menu :index="item.id" v-for="item in store.getters['getuserInfo'].menus">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="val in item.children" :index="val.url">{{ val.title }}</el-menu-item>
                    </el-menu-item-group>

                </el-sub-menu>
            </el-menu>
        </el-aside>
    </div>
</template>


<script lang='ts' setup>
//引入路由信息
import { useRoute } from "vue-router";
//引入仓库 
import { useStore } from "vuex";

const router = useRoute();
const store = useStore();

</script>


<style lang='less' scoped>
.aside {
    height: 100vh;

    .menu {
        height: 100%;
    }
}
</style>